<template>
    <el-dialog class="import-attr-dialog" v-model="centerDialogVisible" title="导入" width="30%" center>
        <span
          >It should be noted that the content will not be aligned in center by
          default</span
        >
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="centerDialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="centerDialogVisible = false"
              >Confirm</el-button
            >
          </span>
        </template>
      </el-dialog>
</template>

<script>
    import { ref } from 'vue'
    export default {
        props: {
            dialogStatus: {
                type: Boolean,
                default: false
            }
        },
        emits: ['update:dialogStatus'],
        setup(props, context) {
            let centerDialogVisible = ref(false)
            function close() {
                context.emit('update:dialogStatus', false)
            }
            return {
                centerDialogVisible
            }
        },
        watch: {
            dialogStatus: {
                handler(v) {
                    this.centerDialogVisible = v
                }
            }
        }
    }
</script>

<style>
</style>
